<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户中心</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/login.css">
    <script src="js/jquery.min.js"></script>
</head>

<body>
    <!-- 导航栏 -->
    <div class="nav">
        <img src="img/logo.jpg" alt="">
        <span class="title">我的博客系统</span>
        <!-- 用来占据中间位置 -->
        <span class="spacer"></span>
        <a href="blog_list.html">主页</a>
        <a href="#" onclick="onExit()">退出登录</a>
    </div>
    <!-- 版心 -->
    <div class="login-container">
        <!-- 中间的注册框 -->
        <div class="login-dialog" style="height: 460px;">

            <div class="row" style="margin-top: 80px;margin-bottom: 50px;">
                <img id="photo" src="img/avatar.webp" style="width: 100px;height: 140px;" alt="">
                <input id="file" style="font-size: 12px;" type="file" value="更换头像">
                <button style="width: 80px;height: 50px;" onclick="savePhoto()">保存</button>
            </div>
            <div class="row">
                <span>用户名</span>
                <input type="text" id="username">
            </div>
            <div class="row">
                <span>原密码</span>
                <input type="password" id="old_password">
            </div>
            <div class="row">
                <span>新密码</span>
                <input type="password" id="password">
            </div>
            <div class="row">
                <span>确认密码</span>
                <input type="password" id="password2">
            </div>

            <div class="row">
                <button id="submit" onclick="updateUser()">修 改</button>
            </div>
        </div>
    </div>

    <script>
        // 获取用户头像和用户名
        function initPage() {
            jQuery.ajax({
                url:"/user/info",
                type:"GET",
                data:{},
                success:function(body) {
                    if(body.code==200 && body.data!=null && body.data.uid>=0) {
                        // 得到了当前的 userinfo
                        var userinfo = body.data
                        if(userinfo.photo!=null && userinfo.photo!="") {
                            jQuery("#photo").attr("src",userinfo.photo);
                        }
                        jQuery("#username").val(userinfo.username);
                    } else {
                        alert("抱歉: 查询用户信息出错, 请刷新页面再试! " + body.msg);
                    }
                }
            });
        }
        initPage();

        // 保存头像
        function savePhoto() {
            // 得到图片
            var photo = jQuery("#file")[0].files[0];
            if (photo == null) {
                alert("请先选择要上传的头像！");
                return false;
            }
            // 构建一个 form 表单
            var formData = new FormData();
            formData.append("file", photo);
            jQuery.ajax({
                url:"/user/save_photo",
                type:"POST",
                data:formData,
                processData:false, // 告诉 jQuery 不要去加工数据
                contentType:false, // 告诉 jQuery 不要设置类型
                success:function(body) {
                    if(body.code==200 && body.data!=null && body.data!="") {
                        jQuery("#photo").attr("src",body.data);
                    } else {
                        // 图片上传失败
                        alert("抱歉: 上传图片失败, 请重试! " + body.msg);
                    }
                }
            });
        }

        // 修改用户个人信息
        function updateUser() {
            var isUpdatePassword = false; // 是否修改密码
            // 1.非空效验
            var username = jQuery("#username");
            var oldPassword = jQuery("#old_password");
            var password = jQuery("#password");
            var password2 = jQuery("#password2");
            if (username.val().trim() == "") {
                alert("请先输入新用户名！");
                username.focus();
                return false;
            }
            if (oldPassword.val() != "" ||
                password.val() != "" || password2.val() != "") {
                // 需要修改密码
                isUpdatePassword = true;
                if (oldPassword.val().trim() == "") {
                    alert("请先输入原密码！");
                    oldPassword.focus();
                    return false;
                }
                if (password.val().trim() == "") {
                    alert("请先输入新密码！");
                    password.focus();
                    return false;
                }
                if (password2.val().trim() == "") {
                    alert("请先输入确认密码！");
                    password2.focus();
                    return false;
                }
                // 判断新密码和确认密码是否一致
                if (password.val() != password2.val()) {
                    alert("两次输入的新密码不一致，请先确认！");
                    return false;
                }
            }
            // 2.将前端的数据提交给后端
            jQuery.ajax({
                url: "/user/update",
                type: "POST",
                data: {
                    "username": username.val(),
                    "oldPassword": oldPassword.val(),
                    "newPassword": password.val(),
                    "isUpdatePassword": isUpdatePassword
                },
                success: function (body) {
                    // 3.将返回的结果展现给用户
                    if (body.code == 200 && body.data == 1) {
                        // 修改成功
                        if (isUpdatePassword) {
                            alert("修改成功，请重新登录！");
                            // 修改密码，重新登录
                            location.href = "login.html";
                        } else {
                            alert("修改成功！");
                            location.href = "myblog_list.html";
                        }
                    } else {
                        // 修改失败
                        alert("抱歉：修改失败，请重试！" + body.msg);
                    }
                }
            });
        }

        // 退出登录
        function onExit() {
            if (confirm("确认退出? ")) {
                jQuery.ajax({
                    url: "/user/logout",
                    type: "POST",
                    data: {},
                    // 200
                    success: function (body) {
                        // alert(JSON.stringify(body)); // 将 json 转换成 String
                        location.href = "/login.html";
                    },
                    // 非 200
                    error: function (err) {
                        // alert(JSON.stringify(err));
                        if (err != null && err.status == 401) {
                            alert("用户未登录, 即将跳转到登录页!")
                            // 已经被拦截器拦截了 - 未登录
                            location.href = "/login.html";
                        }
                    }
                });
            }
        }
    </script>
</body>

</html>